<template>
  <div>
    <table border="1" cellspacing="1" cellpadding="1">
      <thead>
        欢迎光临vue开发的收银系统水果店
      </thead>
      <tr>
        <th>苹果 ￥10元/斤,折扣 8 折</th>
      </tr>
      <tr>
        <td>请输入你要买的斤数<input type="text" v-model="count" /></td>
      </tr>
      <tr>
        <td><button @click="sum">结账买单~</button></td>
      </tr>
      <tr>
        <td>
          结账单:总价:{{ total }} ￥ 元 折后价：{{ zhe }} ￥ 元 省了：{{
            sheng
          }}
          ￥ 元
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: "",
      total: "0",
      zhe: "0",
      sheng: "0",
    };
  },
  methods: {
    sum() {
      this.total = this.count * 10;
      this.zhe = this.count * 8;
      this.sheng = (10 - 8) * this.count;
    },
  },
};
</script>

<style>
table {
  text-align: center;
  margin: 100px auto;
}
</style>
